<!-- aSource: Ajax source 
	id: table id
	fields: fields of the model
	sAjaxDataProp: the internal property with the rows
	pageSize: Page size, default value 10
	EJ. #{table id:'postsTable', aSource: 'table', fields:['id', 'title',] /}
-->


 <link href="@{'/public/datatables/css/demo_table.css'}" rel='stylesheet' type='text/css' /> 
 <link href="@{'/public/datatables/css/demo_table_jui.css'}" rel='stylesheet' type='text/css' /> 
 <script src="@{'/public/datatables/js/jquery.dataTables.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
     $('#${_id ?: 'datatable'}').dataTable( {
    	"bPaginate": true,
 		"bLengthChange": false,
 		"sPaginationType": "full_numbers",
 		"bProcessing": true,
 		"bServerSide": true,
 		"bFilter": true,
 		"iDisplayLength" : ${_pageSize?: 10},  
        "sAjaxSource": '@{table}',
        "aoColumns": [
           #{list items: _fields, as:'field'}
           	{"sTitle": "${field}", "mDataProp": "${field}"},
           #{/list}
        ],
        "sAjaxDataProp": "${_sAjaxDataProp ?: 'rows'}",
     });
  });
</script>

<table id="${_id ?: 'datatable'}" width="100%">
</table>